<template>
<div id="attribute">
  <div class="attribute-title">属性</div>
  <el-collapse v-model="activeItems" style="margin: 0 1rem">
    <el-collapse-item title="样式" name="1" v-if="currentCell && (getType() === 'edge' || getType() === 'service' || getType() === 'circle')">
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'edge'">
        <span style="width: 4rem">箭头样式</span>
        <el-select v-model="arrowStyle" style="flex: 1;margin-left: 1rem" size="mini" v-if="currentType !=='write-edge'" @change="handleSelectStyle">
          <el-option v-for="(item,index) in arrowOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
        <el-select value="写入" style="flex: 1;margin-left: 1rem" size="mini" v-else disabled>
        </el-select>
      </div>
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'service'">
        <span style="width: 4rem">节点样式</span>
        <el-select v-model="nodeType" style="flex: 1;margin-left: 1rem" size="mini" @change="handleSelectStyle">
          <el-option v-for="(item,index) in serviceOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </div>
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'circle' || getType() === 'service'">
        <span style="width: 4rem">字体大小</span>
        <el-select v-model="fontSize" style="flex: 1;margin-left: 1rem" size="mini" @change="handleSelectSize">
          <el-option v-for="(item,index) in sizeOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </div>
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'service'">
        <span style="width: 4rem">连接点</span>
        <el-dropdown style="flex: 1;margin-left: 1rem" size="mini" @command="handleUpdatePort">
          <el-button type="primary" style="width: 100%;" size="mini">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in portOptions" :key="index" :command="index">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-collapse-item>
    <el-collapse-item title="数据" name="2" v-if="currentCell && getType() !== 'edge'">
      <div style="display: flex;margin: 0 0 1rem 1rem">
        <span style="width: 4rem">标签</span>
        <el-input v-model="currentLabel" style="flex: 1;margin-left: 1rem" size="mini" @change="handleChangeLabel" v-if="getType() !== 'artifact'"></el-input>
        <el-select v-model="artifact" style="flex: 1;margin-left: 1rem" size="mini" @change="handleUpdateArtifact" v-else>
          <el-option v-for="(item,index) in artifactOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </div>
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'circle'">
        <span style="width: 4rem">Artifact</span>
        <el-select v-model="artifact" style="flex: 1;margin-left: 1rem" size="mini" @change="handleUpdateArtifact">
          <el-option v-for="(item,index) in artifactOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </div>
      <div v-if="getType() === 'service'">
      <div style="display: flex;margin: 0 0 5px 0">
        <el-select v-model="artifact" style="flex: 1;" size="mini">
          <el-option v-for="(item,index) in artifactOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
        <el-select v-model="operation" style="flex: 1;margin: 0 5px 0 5px" size="mini">
          <el-option v-for="(item,index) in operationOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
        <el-button type="primary" size="mini" @click="artifactList.push({artifact:artifact, handleType: operation})">新增Artifact</el-button>
      </div>
        <div style="display: flex;margin: 0 0 5px 0" v-for="(item,index) in artifactList" :key="index">
         <el-input v-model="item.artifact" style="flex: 1;" size="mini"></el-input>
         <el-input v-model="item.handleType" style="flex: 1;margin: 0 5px 0 5px" size="mini"></el-input>
         <el-button type="warning" size="mini" @click="artifactList.splice(index,1)">删除Artifact</el-button>
        </div>
      </div>
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'circle'">
        <span style="width: 4rem">阶段</span>
        <el-select v-model="state" style="flex: 1;margin-left: 1rem" size="mini" @change="handleUpdateState">
          <el-option v-for="(item,index) in stateOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </div>
      <!-- <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'service'">
        <span style="width: 4rem">操作</span>
        <el-select v-model="operation" style="flex: 1;margin-left: 1rem" size="mini" @change="handleUpdateOperation">
          <el-option v-for="(item,index) in operationOptions" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </div> -->
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'event'">
        <span style="width: 4rem">生产者</span>
        <el-input v-model="producer" style="flex: 1;margin-left: 1rem" size="mini" disabled></el-input>
      </div>
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'event'">
        <span style="width: 4rem">消费者</span>
        <el-input v-model="consumer" style="flex: 1;margin-left: 1rem" size="mini" disabled></el-input>
      </div>
      <div style="display: flex;margin: 0 0 1rem 1rem" v-if="getType() === 'event'">
        <span style="width: 4rem">消息</span>
        <el-input v-model="message" style="flex: 1;margin-left: 1rem" size="mini" disabled v-if="currentType === 'producer-node'"></el-input>
        <el-select v-model="message" style="flex: 1;margin-left: 1rem" size="mini" @change="handleUpdateMessage" v-else>
          <el-option v-for="(item,index) in messageOptions" :key="index.id" :value="item.id" :label="item.label"></el-option>
        </el-select>
      </div>
    </el-collapse-item>
  </el-collapse>
</div>
</template>

<script>
import eventBus from '../EventBus'
import Utils from '@/Utils'
export default {
  name: "Attribute",
  data() {
    return {
      arrowOptions: ['只读','读取'],
      serviceOptions: ['循环服务','一般服务'],
      sizeOptions: ['10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
      portOptions: ['加左侧连接点', '加右侧连接点', '加顶部连接点', '删除空连接点'],
      artifactOptions: [],
      operationOptions: ['只读', '读取', '写入'],
      stateOptions: [],
      messageOptions: [],
      artifactList:[],
      fontSize: '',
      arrowStyle: '',
      nodeType: '',
      artifact: '',
      state: '',
      operation: '',
      message: '',
      producer: '',
      consumer: '',
      activeItems: ['1','2'],
      currentCell: null,
      currentType: '',
      currentLabel: '',
    }
  },
  computed: {
  },
  methods: {
    getType(){
      if(this.currentType === 'circle-node') return 'circle'
      else if(this.currentType.indexOf('service')!==-1) return 'service'
      else if(this.currentType.indexOf('edge')!==-1) return 'edge'
      else if(this.currentType.indexOf('producer')!==-1 || this.currentType.indexOf('consumer')!==-1) return 'event'
      else if(this.currentType === 'artifact-node') return 'artifact'
      else return 'other'
    },
    handleUpdateArtifact(item) {
      if(this.currentType === 'circle-node') this.currentCell.data.model.artifact = item
      else if(this.currentType === 'artifact-node') {
        eventBus.$emit('updateLabel', {id: this.currentCell.id, label: item})
      }
    },
    handleUpdateOperation(item) {
      this.currentCell.data.model.handleType = item
    },
    handleUpdateMessage(item) {
      this.currentCell.data.model.message = item
    },
    handleUpdateState(item) {
      this.currentCell.data.model.state = item
    },
    handleUpdatePort(item) {
      if(item === 3) eventBus.$emit('removePort', {id: this.currentCell.id})
      else eventBus.$emit('addPort', {id: this.currentCell.id, direction: item})
    },
    handleSelectSize(item) {
      eventBus.$emit('updateSize', {id: this.currentCell.id, size: item.toString()})
    },
    handleSelectStyle(item) {
      eventBus.$emit('updateStyle', {id: this.currentCell.id, style: item})
    },
    handleChangeLabel(item) {
      eventBus.$emit('updateLabel', {id: this.currentCell.id, label: item})
    }
  },
  watch: {
    artifact(newvalue) {
      if(this.currentType === 'artifact-node') return
      this.state = ''
      this.currentCell.data.model.state = ''
      eventBus.$emit('ArtifactClass:getStates',newvalue, (res) => {
        this.stateOptions = res
      })
    }
  },
  mounted() {
    eventBus.$on('select', cell => {
      this.currentCell = cell
      this.currentType = Utils.getCellType(cell)
      this.currentLabel = cell.data.label
      this.producer = ''
      this.consumer = ''
      this.message = ''
      this.artifact = ''
      this.state = ''
      this.operation = ''
      switch (this.currentType) {
        case 'circle-node':
          this.fontSize = Utils.findCircle(cell.id).style.fontSize.match(/\d+/g)[0]
          this.artifact = this.currentCell.data.model.artifact
          this.state = this.currentCell.data.model.state
          eventBus.$emit('ArtifactClass:getAllLabel',(res) => {
            this.artifactOptions = res
          })
          break
        case 'service-node':
          this.fontSize = Utils.findTopRect(cell.id).style.fontSize.match(/\d+/g)[0]
          this.nodeType = '一般服务'
          this.artifactList = this.currentCell.data.model
          eventBus.$emit('ArtifactClass:getAllLabel',(res) => {
            this.artifactOptions = res
          })
          break
        case 'service2-node':
          this.fontSize = Utils.findTopRect(cell.id).style.fontSize.match(/\d+/g)[0]
          this.nodeType = '循环服务'
          this.artifactList = this.currentCell.data.model
          eventBus.$emit('ArtifactClass:getAllLabel',(res) => {
            this.artifactOptions = res
          })
          break
        case 'producer-node': 
          eventBus.$emit('Event:get', this.currentCell.data.label, (res) => {
            this.producer = res.producer
            this.consumer = res.consumer
            this.message = res.message
          })
          break
        case 'consumer-node': 
          eventBus.$emit('Event:getMessages', (res) => {
            console.log(res)
            this.messageOptions = res
          })
          eventBus.$emit('Event:get', this.currentCell.data.label, (res) => {
            this.producer = res.producer
            this.consumer = res.consumer
            this.message = res.message
          })
          break
        case 'artifact-node':
          eventBus.$emit('ArtifactClass:getAllLabel',(res) => {
            this.artifactOptions = res
          })
          break
        case 'cloneRead-edge':
          this.arrowStyle = '只读'
          break
        case 'referenceRead-edge':
          this.arrowStyle = '读取'
          break
        case 'write-edge':
          this.arrowStyle = '写入'
          break
      }
    })
  }
}
</script>

<style scoped>
#attribute {
  text-align: center;
  max-height: 50%;
  overflow-y: auto;
}
.attribute-title {
  line-height: 2rem;
  height: 2rem;
  text-align: center;
  border-bottom: 1px solid #cecece;
}
/*/deep/.el-collapse-item__wrap {*/
/*  border-bottom: none!important;*/
/*}*/
/*/deep/.el-collapse-item__header {*/
/*  border-bottom: none!important;*/
/*}*/
</style>
